<script setup>

import {onMounted, reactive, ref} from "vue";
import {findProTask} from "@/apis/zyj/ProductionSceduling.js";
import {findProcessSetting} from "@/apis/zyj/ProcessSettings.js";
import {ElMessage} from "element-plus";

const props = defineProps({
  dialogVisible: Boolean,
  workorderCode: String
})
const emit = defineEmits(['close'])

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableData = ref([])
const processData = ref([])
const selectProTask = ref()

const searchForm = reactive({
  processCode: '',
  workstationCode: '',
  taskCode: ''
})

function tableInit() {
  searchForm.currentPage = currentPage.value
  searchForm.pageSize = pageSize.value
  searchForm.workorderCode = props.workorderCode
  findProTask(searchForm).then(res => {
    console.log("任务", res)
    tableData.value.length = 0
    tableData.value = res.records
    total.value = res.total
    currentPage.value = res.current
    pageSize.value = res.size
  })
}

onMounted(() => {
  tableInit()
  findProcessSetting('', '-1', '-1').then(res => {
    processData.length = 0
    processData.value.push(...res)
  })
})
const handleClose = () => {
  emit('close')
}
const handleSearch = () => {
  tableInit()
}
const handleReset = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  tableInit()
}
const handleSizeChange = () => {
  tableInit()
}
const handleCurrentChange = () => {
  tableInit()
}
const handleSelectionChange = (val) => {
  selectProTask.value = null
  selectProTask.value = val
}
const handleSelect=()=>{
  console.log(selectProTask.value)
  if (selectProTask.value == null) {
    ElMessage.error("请选择数据")
    return;
  } else {
    emit('confirm', selectProTask.value)
    handleClose()
  }
}
</script>

<template>
  <el-dialog title="选择生产任务" v-model="props.dialogVisible" width="70%" @close="handleClose" align-center
             append-to-body>
    <div>
      <el-form :model="searchForm" inline class="mb-4">
        <el-form-item label="所属工序">
          <el-select v-model="searchForm.processCode" placeholder="请选择所属工序" clearable style="width: 200px;">
            <el-option v-for="item in processData" :key="item.processCode" :label="item.processName"
                       :value="item.processCode"/>
          </el-select>
        </el-form-item>
        <el-form-item label="所属工作站">
          <el-input v-model="searchForm.workstationCode" placeholder="请输入工作站编号" clearable/>
        </el-form-item>
        <el-form-item label="任务编号">
          <el-input v-model="searchForm.taskCode" placeholder="请输入生产任务编号" clearable/>
        </el-form-item>
        <el-button type="primary" icon="search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" icon="refresh" @click="handleReset">重置</el-button>
      </el-form>
    </div>
    <div style="margin-top: 20px">
      <el-table :data="tableData" @current-change="handleSelectionChange" highlight-current-row>
        <el-table-column prop="taskCode" label="任务编号">
          <template #default="scope">
            <el-tooltip :content="scope.row.taskCode" raw-content placement="top-start" v-if="scope.row.taskCode">
              <span v-if="scope.row.taskCode && scope.row.taskCode.length <= 6">
                {{ scope.row.taskCode }}
              </span>
              <!-- 如果单元格中有值，并且值得长度大于15，便使用substr截取0-15的内容显示，后面的变成省略号-->
              <span v-if="scope.row.taskCode && scope.row.taskCode.length > 6">
                {{ scope.row.taskCode.substring(0, 6) + "..." }}
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="taskName" label="任务名称">
          <template #default="scope">
            <el-tooltip :content="scope.row.taskName" raw-content placement="top-start" v-if="scope.row.taskName">
              <span v-if="scope.row.taskName && scope.row.taskName.length <= 5">
                {{ scope.row.taskName }}
              </span>
              <!-- 如果单元格中有值，并且值得长度大于15，便使用substr截取0-15的内容显示，后面的变成省略号-->
              <span v-if="scope.row.taskName && scope.row.taskName.length > 5">
                {{ scope.row.taskName.substring(0, 5) + "..." }}
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="workstationCode" label="工作站编号"/>
        <el-table-column prop="workstationName" label="工作站名称"/>
        <el-table-column prop="quantity" label="排产数量"/>
        <el-table-column prop="quantityProduced" label="已生产数量"/>
        <el-table-column prop="startTime" label="开始生产时间"/>
        <el-table-column prop="duration" label="生产时长"/>
        <el-table-column prop="endTime" label="预计完成时间"/>
        <el-table-column prop="colorCode" label="显示颜色"/>
      </el-table>
      <div class="justify-between">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5,10,20,25]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <template #footer>
      <div style="text-align: center">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSelect">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.justify-between {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>